<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="600px"
      title="导入"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="model" :rules="rules" label-width="100px">
        <el-form-item label="用能单位" prop="sysDeptList">
          <cascader-select
            v-model="model.sysDeptList"
            :values="model.sysDeptList"
            varient="energy"
            node-key="id"
            placeholder="请选择用能单位"
          ></cascader-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :data="{ deptId: model.sysDeptList[model.sysDeptList.length - 1] }"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
            class="upload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="importTemplate"
                >下载模板</el-link
              >
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <form-button
        slot="footer"
        cancel-text="关闭"
        @submit="submitFileForm"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import FormButton from "@/components/FormButton";
import { getToken } from "@/utils/auth";
import { exportExecl } from "@/utils/export-execl";
import CascaderSelect from "@/components/Select/CascaderSelect";
export default {
  components: {
    FormButton,
    CascaderSelect,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/energy/quota-assess/energyData",
      },
      model: { sysDeptList: [] },
      rules: {
        sysDeptList: [
          {
            required: true,
            message: "请选择所属用能单位",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  // watch: {
  //   visible(value) {
  //     if (value && this.id > 0) {
  //       this.getInfo();
  //     } else {
  //       this.model = {
  //         substation: "",
  //         identity: "",
  //         taxNum: "",
  //         code: "",
  //         switchStatus: "",
  //       };
  //     }
  //   },
  // },
  created() {
    // 阻止火狐浏览器拖拽上传文件弹出新窗口
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  methods: {
    /** 下载模板操作 */
    importTemplate() {
      exportExecl(
        "额度评估用能数据导入模板",
        "/energy/quota-assess/importEnergyDataFileTmp?fileName=额度评估用能数据导入模板.xlsx",
        {},
        this
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.code === 200) {
        this.$message.success("操作成功");
        this.$refs.upload.clearFiles();
        this.$emit("input", response.data);
        this.handleClose(true);
      } else {
        this.$message.error(response.msg);
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
        }
      });
    },
    handleClose(status) {
      this.model.sysDeptList = [];
      this.$emit("update:visible", false);
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
.upload {
  text-align: center;
}
</style>